import React, { Component } from 'react'
// import { SettingAlert } from '../../components'
import { Modal, Button, Form  } from 'antd';
import { ModalForm } from '../../components'
import {fetchData} from '../../components/AjaxConsumer'

const WrappedAdvancedSearchForm = Form.create()(ModalForm);

export default class SettingPage extends Component {
    constructor(props) {
           super(props);
           this.state = {
               loading: false,
               visible: false,
               getFormData: [
                {
                    type : 'input',              //必填 输入框类型
                    showName : '姓名',           //必填  label标签名
                    name : 'userName',          //必填  传递的key (不能一样)
                    initialValue : '',          //选填   默认value
                    required: true,             //选填   是否一定要填写
                    disable: false,              //选填   是否可编辑
                    pattern:/^1$/,               //选填 暂时只有输入框有此属性
                    errorMessage:'请正确输入相应要求' //暂时只有输入框有此属性
                },
                {
                    type : 'cascader',
                    showName : '城市级联下拉',
                    proviceName: 'qihong',
                    cityName: 'zhangx',
                    areaName: 'liml',
                    initialValue : '',
                    required: false,
                    disable: false
                },
                 {
                    type : 'dataTimePicker',
                    showName : '选择入职的日期',
                    name : 'dataPicker',
                    //initialValue : '2015-01-05 12:55:26', //除标准格式外还可以是2015-1-5或者2015/1/5  {输出为标准格式'YYYY-MM-DD'}
                    initialValue : '',
                }, {
                    type : 'dataPicker',
                    showName : '选择入职的日期2',
                    name : 'dataPicker2222',
                    //   initialValue : '2018-11-25',
                    initialValue : '',
                    required: false,
                }, {
                    type : 'email',
                    showName : '电子邮件',
                    name : 'emailrName',
                    initialValue : '',
                    required: false,
                    disable: false
                }, {
                        type : 'password',
                        showName : '密码',
                        name : 'pwd',
                        initialValue : '',
                        required: true,
                }, {
                    type : 'hiddenInput',
                    name : 'id',
                    initialValue : '001',
                },{
                    type : 'uploadFile',
                    showName : '上传',
                    name : 'upload',
                    uploadUrl: '//jsonplaceholder.typicode.com/posts/',  //必须
                    required: true
                }, {
                        type : 'treeSelect',
                        showName : '树选择',
                        name : 'treeSlect',
                        required: true,
                        treeData : [                    //必须
                            {
                                label: 'Node1',        //节点显示内容
                                value: 'node1Value',          //节点返回的value
                                key: '0-0',
                                children: [
                                    {
                                        label: 'Child Node1',
                                        value: 'node1childevalue',
                                        key: '0-0-1'
                                    }, {
                                        label: 'Child Node2',
                                        value: 'node1childe2value',
                                        key: '0-0-2'
                                    }
                                ]
                            }, {
                                label: 'Node2',
                                value: 'node2value',
                                key: '0-1'
                            }
                        ]
                    }, {
                    type : 'radio',
                    showName : '单选按钮',
                    name : 'radioKey',
                    initialValue : 'radioValue1',
                    radioList:[                   //必填  单选按钮的选择项
                        {
                            radioKey:'radioValue1',
                            radioShow:'标签1'
                        },{
                            radioKey:'radioValue2',
                            radioShow:'标签2'
                        },{
                            radioKey:'radioValue3',
                            radioShow:'标签3'
                        },{
                            radioKey:'radioValue4',
                            radioShow:'标签4'
                        },{
                            radioKey:'radioValue5',
                            radioShow:'标签5'
                        },{
                            radioKey:'radioValue6',
                            radioShow:'标签6'
                        }
                    ],
                    required: true
                },{
                    type : 'number',     //必填 数字选择输入框
                    showName : '等级',
                    name : 'rank',
                    initialValue : '3',       
                    required:true
                },{
                    type : 'selectAutoComplete',   
                    showName : '自动补全下拉框',
                    name : 'atcp',
                    initialValue : '',
                    optionKey: 'dicCode',
                    optionValue: 'dicName',
                    url:'/getSelectData',
                    required:false,
                },{
                    type : 'selectAutoCompleteRemote',    
                    showName : '远程自动补全下拉框',
                    name : 'atcpRemote111',
                    initialValue : '',  
                    childrenList:[], 
                    required:false,
                    url:'/getSelectData2/',
                },{
                    type : 'textarea',
                    showName : '备注',
                    name : 'remark',
                    initialValue : '这是一串默认备注'
                }
            ]
           };
       }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = () => {
      this.setState({ visible: false })
  }
  handleCancel = () => {
    this.setState({ visible: false });
  }
  //select的回调函数
  formSelectCallBack = (tagName,value) => {
    console.log('tagName',tagName);
    console.log('value',value);
  }
  render() {
      let formAlerSize = 'large'; //弹出框的大小 只有'large'和'small'两种值 （必须,输错时默认为large）
      let getFormData = this.state.getFormData;
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open modal dialog
        </Button>

        <Modal
          style={{top:'20px'}}
          visible={this.state.visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={formAlerSize=='large'?'850px':'400px'}
          footer=''
          maskClosable={false}
        >
            <WrappedAdvancedSearchForm
                ref='WrappedAdvancedSearchForm11'
                formAlerSize={formAlerSize}
                formUrl="/backFalse"
                getFormData={getFormData}
                closeBox={this.handleCancel}
                checkBox={this.handleOk}
                formSelectCallBack={this.formSelectCallBack}
            />
        </Modal>
      </div>
    );
  }
}
